<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>canvas使用</title>
		<style type="text/css">
			html,
			body {
				margin: 0px;
			}
			
			canvas {
				background: #ccc;
			}
		</style>
	</head>

	<body>
		<canvas id="canvas_1" style="box-shadow: 0px 0px 20px black;">我们在设置canvas之前需要首先监测用户电脑是否支持canvas</canvas>
	</body>
	<script type="text/javascript">
		//获取canvas元素对应的DOM对象
		var canvas_1 = document.getElementById("canvas_1");
		//设置宽度和高度推荐写法
		//1.使用内联式写法
		//2.使用点(.)
		canvas_1.width = "500";
		canvas_1.height = "500";

		var ctx = canvas_1.getContext("2d");
		//线宽

//		console.log(ctx);
//		//开始绘制
//		ctx.beginPath();
//		//设置绘制起点
//		ctx.moveTo(100, 100);
//		//设置绘制下一点
//		ctx.lineTo(100, 200);
//		ctx.lineTo(200, 200);
//		ctx.lineTo(200, 100);
//		ctx.lineTo(100, 100);
//		//添加颜色
//		ctx.lineWidth = 10;
//		//角
//		ctx.lineJoin = "round";
//		//填充线条
//		ctx.strokeStyle = 'red';
//		ctx.stroke();
//		//填充块
//		ctx.fillStyle = 'blue';
//		ctx.fill();
//
//		ctx.font = "italic 50px 隶书";
//		ctx.textBaseline = "top";
//		ctx.fillText('帅', 0, 0);
//
//		ctx.strokeStyle = "f0f";
//		ctx.font = 'bold 45px 宋体';
//		ctx.strokeText('hdoadiasdu', 0, 50, 300);
//
//		//结束绘制
//		ctx.closePath();

		for(var i = 0; i < 10; i++) {
			// 开始定义路径
			ctx.beginPath();
			// 添加一段圆弧
			ctx.arc(i * 25, i * 25, (i + 1) * 8, 0, Math.PI * 2, true);
			// 关闭路径
			ctx.closePath();
			// 设置填充颜色
			ctx.fillStyle = 'rgba(255,0,255,' + (10 - i) * 0.1 + ')';
			// 填充当前路径
			ctx.fill();
		}
	</script>

</html>